<template>
    <div class="nav xiaozhucaishui-nav-sb" id="topNav">
        <div class="nav-sb">
            <div class="logo-text">
                小竹财税
                <span>向财税人传播快乐·幸福</span>
            </div>
            <!-- <div
                class="search"
                :style="{ minWidth: searchInputWidth ? '600px' : '350px' }"
            >
                <el-input
                    v-model="searchInput"
                    class="input"
                    placeholder="请输入内容"
                    @blur="searchInputWidth = false"
                    @focus="searchInputWidth = true"
                ></el-input>
                <div class="search-button">探索一下</div>
            </div> -->
            <el-popover
                placement="bottom"
                width="331"
                :offset="0"
                trigger="hover"
                popper-class="myMenu-new-popper-class"
            >
                <img
                    slot="reference"
                    v-show="userInfo == null"
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/no_user_avatar.png"
                    alt="立即登陆"
                    class="login-register-avatar"
                    @click="showLoginTabs"
                />
                <div class="myMenu-new-popper-main">
                    <div class="user-no-login" @click="showLoginTabs">
                        <img
                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/no_user_avatar.png"
                            alt="立即登陆"
                        />
                        <div class="user-no-login-text">
                            <div>立即登录 ></div>
                            登录后你可以免费查阅法规
                        </div>
                    </div>
                    <div class="box-no-login">
                        <div class="vip-no-login">
                            <img
                                src="~/assets/images/index/vip-icon.png"
                                alt="vip"
                            />
                            <div class="vip-no-login-text">
                                <div>低至0.46元/天</div>
                                开通一年会员送66天会员
                            </div>
                            <div
                                class="vip-no-login-button"
                                @click="go('/vipcenter')"
                            >
                                立即开通
                            </div>
                        </div>
                        <div class="myMenu-popper-no-login-icon">
                            <div class="no-login-icon-item">
                                <img
                                    src="~/assets/images/index/no-login-icon-1.png"
                                    alt="财税垂直AI"
                                />六大核心权益
                            </div>
                            <div class="no-login-icon-item">
                                <img
                                    src="~/assets/images/index/no-login-icon-2.png"
                                    alt="100+专家政策解读"
                                />17项细分权益
                            </div>
                            <div class="no-login-icon-item">
                                <img
                                    src="~/assets/images/index/no-login-icon-3.png"
                                    alt="70+专业提升课"
                                />各类财税工具
                            </div>
                            <div class="no-login-icon-item">
                                <img
                                    src="~/assets/images/index/no-login-icon-4.png"
                                    alt="1000＋服务商"
                                />被忽略的职场课
                            </div>
                        </div>
                    </div>
                </div>
            </el-popover>
            <bilibiliUserPopover v-if="userInfo"></bilibiliUserPopover>
        </div>

        <no-ssr placeholder="Loading...">
            <div v-if="signShow" class="mask">
                <div class="sign">
                    <div class="new-title">
                        <img src="~/assets/images/index/signTitle.png" alt="" />
                        <i
                            class="el-icon-error sign-close"
                            @click="set_signShow(false)"
                        ></i>
                    </div>
                    <div class="sign-bottom">
                        <div class="sign-title">
                            <template v-if="signData.continue_day > 0">
                                已累计签到<span>{{
                                    signData.continue_day
                                }}</span
                                >天
                            </template>
                            <template v-else> 签到领小竹叶 </template>
                        </div>
                        <div class="sign-list">
                            <div
                                v-for="(item, index) in signList"
                                :key="index"
                                class="sign-item"
                                :class="{
                                    'sign-item-active':
                                        index < signData.continue_day,
                                }"
                            >
                                <div class="text1">第{{ item.name }}天</div>

                                <i class="el-icon-success"></i>
                                <img
                                    class="bi-img"
                                    src="~/assets/images/index/sign-bi.png"
                                    alt="小竹叶"
                                />
                                <div class="text2">+{{ item.reward }}</div>
                                <img
                                    class="kun-img"
                                    src="~/assets/images/index/sign-kun.png"
                                    alt=""
                                />
                            </div>
                        </div>
                        <el-button
                            class="sign-button"
                            :disabled="signData.is_sign == '1'"
                            :class="{
                                'sign-button-disabled': signData.is_sign == '1',
                            }"
                            @click="new_sign"
                        >
                            {{
                                signData.is_sign == "0"
                                    ? "立即签到"
                                    : `已签到，明日可获得${
                                          signList[signData.continue_day].reward
                                      }小竹叶`
                            }}
                        </el-button>
                    </div>
                    <div class="app-go">
                        <nuxt-link to="/download" target="_blank"
                            >下载APP</nuxt-link
                        >，<span>免费</span>转盘抽奖中，华为手机大奖等你赢
                        邀请好友助力，实物<span>0元购</span>！
                    </div>
                </div>
            </div>

            <!-- <Vcode
                v-if="token"
                :show="vcodeShow"
                @success="getCode"
                @close="close"
            /> -->
        </no-ssr>
    </div>
</template>

<script>
import {
    pcRegister,
    smsSend,
    userMobilelogin,
    userLogin,
    userChangepwd,
    logout,
    addonsnoticeapiindex,
    new_signlist,
    new_sign,
    getAppletCode,
    check_appletcache,
    make_ticket,
} from "@/assets/api/indexApi.js";

import { getmessage_count } from "@/assets/api/userCenterApi";

import { mapState, mapMutations, mapActions } from "vuex";

import switch_type_wx from "@/assets/images/index/switch_type_wx.png";
import switch_type_wx2 from "@/assets/images/index/switch_type_wx2.png";
import switch_type_web from "@/assets/images/index/switch_login_web.png";
import switch_type_web2 from "@/assets/images/index/switch_login_web2.png";

import bilibiliUserPopover from "@/components/index/bilibiliUserPopover.vue";

// import Vcode from 'vue-puzzle-vcode'
var clickSwitch = true;

var checkMobile = (rule, value, callback) => {
    if (!value) {
        return callback(new Error("请输入手机号"));
    }
    // var reg = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
    var reg = /^1[3456789]\d{9}$/;
    if (!reg.test(value)) {
        return callback(new Error("手机号码有误"));
    } else {
        return callback();
    }
};

var checkAgree = (rule, value, callback) => {
    if (value == "0") {
        return callback(new Error("请同意《小竹用户协议》和《用户隐私政策》"));
    } else {
        return callback();
    }
};

var checkPasswordNew2 = (rule, value, callback) => {
    if (!value) {
        return callback(new Error("再次确认新密码"));
    }
    if (value != this.loginForm.passwordNew) {
        return callback(new Error("两次密码不一致"));
    } else return callback();
};

export default {
    name: "myNav",
    props: ["lists"],
    components: {
        // Vcode,
        bilibiliUserPopover,
    },
    data() {
        return {
            nameColr: false,
            appShow: false,

            codeTest: "获取验证码",

            // 当前登录弹窗状态
            tabsIndex: 0, // 0 快捷登录 1 密码登录 2 注册账户 3 找回密码
            vcodeShow: false,

            // 登录数据
            loginForm: {
                mobile: null,
                code: "",
                password: "",
                agree: "0",
                passwordNew: "",
                passwordNew2: "",
            },
            loginRules: {
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                ],
                passwordNew: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                ],
                passwordNew2: [
                    { validator: checkPasswordNew2, trigger: "blur" },
                ],
                code: [
                    {
                        required: true,
                        message: "请输入短信验证码",
                        trigger: "blur",
                    },
                ],
                mobile: [{ validator: checkMobile, trigger: "blur" }],
                agree: [{ validator: checkAgree, trigger: "blur" }],
            },

            signList: [],
            signData: {
                continue_day: 0,
                is_sign: "0",
                signlist: {
                    content: "",
                    list: [],
                    rule: "",
                    type: 1,
                },
            },

            loginType: "web",
            switch_type_wx: switch_type_wx,
            switch_type_wx2: switch_type_wx2,
            switch_type_web: switch_type_web,
            switch_type_web2: switch_type_web2,
            wxcode: "",
            ticket: "",
            wechatloading: false,
            wechatCheck: null,
            wechatCodeExpire: false,
            wechatCodeTime: 0,

            userPopoverShow: false,
            PopoverTime: null,

            token: "",

            searchInput: "",
            searchInputWidth: false,
        };
    },
    computed: {
        ...mapState("common", {
            loginShow: (state) => state.loginShow,
            userInfo: (state) => state.userInfo,
            messageCount: (state) => state.messageCount,
            goeasyObj: (state) => state.goeasyObj,
            signShow: (state) => state.signShow,
        }),
        sumCount: function () {
            return (
                this.messageCount.wendahuifu +
                this.messageCount.comment +
                this.messageCount.like +
                this.messageCount.message +
                this.messageCount.xx_unread +
                this.messageCount.hd_unread +
                this.messageCount.huiyuanzhuanxiang
            );
        },
        getVipType: function () {
            if (!this.userInfo) return;
            if (this.userInfo.is_99vip == 1) return "永久会员";
            else if (this.userInfo.is_gpt_vip == 0)
                return "您当前未开通任何会员";
            else {
                return `${this.userInfo.gpt_vip_end_time_text} 到期`;
            }
        },
    },
    watch: {
        signShow: function (n, l) {
            if (n) {
                this.new_signlist();
            }
        },
    },
    beforeMount() {
        // 只会在浏览器执行
        // this.$options.components["Vcode"] = () => import("vue-puzzle-vcode");
    },
    mounted() {
        // let codeTime = localStorage.getItem("codeTime");
        // if (codeTime && parseInt(codeTime) > 0) {
        //     this.codeTimeout(parseInt(codeTime));
        // }
    },
    methods: {
        ...mapMutations("common", [
            "setloginShow",
            "setuserInfo",
            "set_messageCount",
            "set_payVipShow",
            "set_signShow",
        ]),
        ...mapActions("common", ["getUserInfo"]),

        // 鼠标移入0.8s后头像
        mouseEnterEvent() {
            if (this.PopoverTime) clearInterval(this.PopoverTime);

            this.PopoverTime = setInterval(() => {
                this.userPopoverShow = true;
                if (this.PopoverTime) clearInterval(this.PopoverTime);
                this.PopoverTime = null;
            }, 300);
        },

        // 鼠标移出头像
        mouseLeaveEvent() {
            if (this.PopoverTime) clearInterval(this.PopoverTime);
            this.PopoverTime = null;
            this.userPopoverShow = false;
        },

        // 获取未读消息
        async getmessage_count() {
            const res = await getmessage_count({});
            if (res.code == 1) {
                this.set_messageCount(res.data);
            }
        },

        // 获取签到信息
        async new_signlist() {
            const res = await new_signlist({});
            if (res.code == 1) {
                if (res.data.signlist) this.signList = res.data.signlist.list;
                this.signData = res.data;
            }
        },

        // 展示签到
        async clickSignShow() {
            if (localStorage.getItem("token")) {
                this.set_signShow(true);
                this.new_signlist();
            } else {
                this.$message({
                    message: "请登录",
                    type: "warning",
                });
                this.setloginShow(true);
            }
        },

        // 获取小程序登录二维码
        async getAppletCode() {
            this.loginType = "wx";
            let time = Date.now();
            console.log(time - this.wechatCodeTime);
            if (this.wechatCodeTime && time - this.wechatCodeTime < 60000) {
                if (!this.wechatCheck)
                    this.wechatCheck = setInterval(() => {
                        this.check_appletcache();
                    }, 2000);
                return;
            }
            this.wechatloading = true;
            this.wechatCodeExpire = false;
            const ticket = await make_ticket({});
            if (ticket.code == 1) {
                this.ticket = ticket.data;
                const res = await getAppletCode({
                    ticket: this.ticket,
                });
                this.wxcode = window.URL.createObjectURL(res);
                this.wechatCodeTime = time;
                this.wechatloading = false;

                if (this.wechatCheck) {
                    this.clearWeChatTime();
                }
                this.wechatCheck = setInterval(() => {
                    this.check_appletcache();
                }, 2000);
            } else {
                this.wechatloading = false;
            }
        },

        // 检测二维码票据状态
        async check_appletcache() {
            if (!this.ticket || !this.loginShow) {
                this.clearWeChatTime();
                return;
            }
            const res = await check_appletcache({
                ticket: this.ticket,
            });
            // 二维码过期
            if (res.data && res.data == "10001") {
                this.clearWeChatTime();
                this.wechatCodeExpire = true;
                return;
            }
            if (res.token) {
                localStorage.setItem("token", res.token);
                localStorage.setItem("userInfo", JSON.stringify(res.userinfo));
                this.setuserInfo(res.userinfo);
                this.setloginShow(false);
                this.clearWeChatTime();
                location.reload();
            }
        },

        // 停止计时器
        clearWeChatTime() {
            console.log("停止");
            clearInterval(this.wechatCheck);
            this.wechatCheck = null;
        },

        async new_sign() {
            if (!clickSwitch) return;
            clickSwitch = false;
            const res = await new_sign({
                title:
                    this.signData.signlist.type == 0 ? "普通活动" : "SVIP活动",
                list_id: this.signList[this.signData.continue_day].id,
            });
            if (res.code == 1) {
                this.$message({
                    message: "签到成功",
                    type: "success",
                });
                this.new_signlist();
                this.getUserInfo();
            }
        },

        //
        menuCommand(e) {
            // 页面跳转
            if (e == "logout") {
                this.$confirm("是否退出登录?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    this.logout();
                });
            }
            if (e == "myQuiz") {
                this.$router.push({ path: "/user/myquiz", params: {} });
            }
            if (e == "myAnswer") {
                this.$router.push({ path: "/user/myanswer", params: {} });
            }
            if (e == "myBamboo") {
                this.$router.push({ path: "/user/mybamboo", params: {} });
            }
            if (e == "myVip") {
                this.$router.push({ path: "/user/myvip", params: {} });
            }
            if (e == "myDownload") {
                this.$router.push({ path: "/user/mydownload", params: {} });
            }
            if (e == "myorderform") {
                this.$router.push({ path: "/user/myorderform", params: {} });
            }
            if (e == "myserviceorder") {
                this.$router.push({ path: "/user/myserviceorder", params: {} });
            }
            if (e == "mydemand") {
                this.$router.push({ path: "/user/mydemand", params: {} });
            }
            if (e == "mycollect") {
                this.$router.push({ path: "/user/mycollect", params: {} });
            }
            if (e == "mySet") {
                this.$router.push({ path: "/user/myset", params: {} });
            }
        },

        // 退出登录
        async logout() {
            const id = this.userInfo.id;
            const res = await logout({});
            this.$message("已退出登录");
            this.setuserInfo(null);
            // localStorage.removeItem("token");
            // localStorage.removeItem("userInfo");
            // localStorage.removeItem("closeServiceOne");
            // localStorage.removeItem("is_show_userdiscountcoupons");
            localStorage.clear();
            this.$router.push({ path: "/" });
            if (this.goeasyObj)
                this.goeasyObj.pubsub.unsubscribe({
                    channel: id,
                    onSuccess: function () {},
                    onFailed: function (error) {},
                });
        },

        // 隐藏登录弹窗
        closeLogin(e) {
            this.setloginShow(false);
        },

        // 修改登录弹窗状态
        showLoginTabs(is, index) {
            this.$router.push({
                path: "/login",
                query: {
                    url: window.location.pathname + window.location.search,
                    click: "1",
                },
            });
            return;
            this.setloginShow(is);
            this.tabsIndex = index;
        },

        // 下拉鼠标悬浮事件
        hovercCange(type) {
            this.nameColr = type;
        },

        // 用户协议跳转
        goxieyi(e) {
            if (e == 1) {
                let { href } = this.$router.resolve({
                    path: "/UserAgreement/",
                    query: {
                        index: 0,
                    },
                });
                window.open(href, "_blank");
                // window.open(
                //     "https://api.xiaozhucaishui.com/xieyi/user",
                //     "_blank"
                // );
            } else {
                let { href } = this.$router.resolve({
                    path: "/UserAgreement/",
                    query: {
                        index: 1,
                    },
                });
                window.open(href, "_blank");
                // window.open(
                //     "https://api.xiaozhucaishui.com/xieyi/privacy",
                //     "_blank"
                // );
            }
        },

        // 点击提交登录表单
        clickSubmit() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    // if (this.tabsIndex == 2) this.vcodeShow = true
                    // // 验证
                    // else this.submitForm()
                    this.submitForm();
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },

        // 用户点击遮罩层，应该关闭模态框
        close() {
            this.vcodeShow = false;
        },

        isGetCode() {
            // 暂时停用图形验证
            this.vcodeShow = true;
            // this.getCode();
        },

        // 获取验证码
        async getCode() {
            this.vcodeShow = false; // 通过验证后，需要手动隐藏模态框
            if (!this.loginForm.mobile) {
                this.$alert("请输入手机号", "", {
                    confirmButtonText: "确定",
                });
                return;
            }
            var reg = /^1[3456789]\d{9}$/;
            if (!reg.test(this.loginForm.mobile)) {
                this.$alert("手机号码有误", "", {
                    confirmButtonText: "确定",
                });
                return;
            }

            let parems = {
                mobile: this.loginForm.mobile,
            };

            if (this.tabsIndex == 0) parems.event = "mobilelogin";
            else if (this.tabsIndex == 2) parems.event = "register";
            else if (this.tabsIndex == 3) parems.event = "changepwd";

            if (this.codeTest == "获取验证码") {
                this.codeTest = "发送中";
                const res = await smsSend(parems);

                if (res.code == 1) {
                    this.$message({
                        showClose: true,
                        message: res.msg,
                        type: "success",
                    });
                    this.codeTimeout(60);
                } else {
                    this.codeTest = "获取验证码";
                    this.$alert(res.msg, "", {
                        confirmButtonText: "确定",
                    });
                }
            }
        },

        codeTimeout(e) {
            localStorage.setItem("codeTime", e);
            if (e > 0) {
                this.codeTest = e + "s";
                setTimeout(() => {
                    this.codeTimeout(e - 1);
                }, 1000);
            } else {
                this.codeTest = "获取验证码";
            }
        },

        // 提交登录
        async submitForm() {
            // 注册
            if (this.tabsIndex == 2) {
                var res = await pcRegister({
                    mobile: this.loginForm.mobile,
                    captcha: this.loginForm.code,
                    password: this.loginForm.password,
                });
                if (res.code == 1) {
                    this.tabsIndex = 1;
                    this.$message({
                        showClose: true,
                        message: res.msg,
                        type: "success",
                    });
                    return;
                }
            }

            // 登录
            else if (this.tabsIndex == 0 || this.tabsIndex == 1) {
                if (this.tabsIndex == 0)
                    var res = await userMobilelogin({
                        mobile: parseFloat(this.loginForm.mobile),
                        captcha: parseFloat(this.loginForm.code),
                    });
                if (this.tabsIndex == 1)
                    var res = await userLogin({
                        account: parseFloat(this.loginForm.mobile),
                        password: this.loginForm.password,
                    });
                if (res.code == 1) {
                    this.$message({
                        showClose: true,
                        message: res.msg,
                        type: "success",
                    });

                    localStorage.setItem("token", res.data.token);
                    localStorage.setItem(
                        "userInfo",
                        JSON.stringify(res.data.userinfo)
                    );
                    this.setuserInfo(res.data.userinfo);

                    this.setloginShow(false);

                    location.reload();
                } else {
                    // this.$message({
                    //     showClose: true,
                    //     message: res.msg,
                    //     type: "warning",
                    // });
                    return;
                }
            }

            // 忘密码
            else if (this.tabsIndex == 3) {
                var res = await userChangepwd({
                    mobile: parseFloat(this.loginForm.mobile),
                    captcha: parseFloat(this.loginForm.code),
                    newpassword: this.loginForm.passwordNew,
                    newpassword2: this.loginForm.passwordNew,
                });
                if (res.code == 1) {
                    this.tabsIndex = 1;
                    this.$message({
                        showClose: true,
                        message: res.msg,
                        type: "success",
                    });
                    return;
                }
            }
        },

        go(url) {
            this.$router.push({
                path: url,
            });
        },

        goTools() {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => {});
                return;
            }
            this.$router.push({
                path: "/tools/taxcount",
            });
        },

        goApplySerice() {
            let token = localStorage.getItem("token");
            if (token)
                this.$router.push({
                    path: "/service/applyservice",
                });
            else this.setloginShow(true);
        },

        async testccc() {
            const res = await addonsnoticeapiindex({});
        },
    },
};
</script>

<style>
.el-popover {
    min-width: 100px !important;
}
</style>

<style lang="scss">

.xiaozhucaishui-nav-sb {
    background-color: #1c87f3;
    // overflow: hidden;
    height: 70px;
    padding: 0 70px;
    .bilibili-user-con {
        top: 80px;
        right: 70px;
    }
    .nav-sb {
        height: 70px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .logo-text {
            color: #ffffff;
            font-weight: 700;
            font-size: 28px;
            width: 100%;
            span {
                font-size: 22px;
            }
        }
        .login-register-avatar {
            width: 44px;
            height: 44px;
            min-width: 44px;
            border-radius: 100%;
            border: 1px solid #2d2a2b;
            cursor: pointer;
        }
        .search {
            height: 40px;
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            margin-right: 40px;
            transition: all 0.3s;
            .input {
                background: #ffffff;
                border-radius: 8px;
            }
            .search-button {
                position: absolute;
                right: 0;
                top: 0;
                width: 99px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                background: #026beb;
                border-radius: 8px 0 0 8px;
                font-size: 18px;
                color: #ffffff;
                cursor: pointer;
                user-select: none;
                &:hover {
                    opacity: 0.9;
                }
                &:active {
                    opacity: 0.8;
                }
            }
        }
    }

    em {
        color: #1c87f3 !important;
    }

    .app-code {
        img {
            display: block;
            width: 100px;
            height: 100px;
        }
    }

    .con {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;

        .left {
            font-size: 12px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #666666;
        }

        .right {
            display: flex;
            align-items: center;
            position: relative;

            .el-dropdown-link {
                font-size: 12px;
                font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                font-weight: 400;
                color: #333333;

                i {
                    padding-left: 3px;
                }
            }
            .nav-item2 {
                margin-left: 0;
            }
            .nav-item {
                font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                font-size: 12px;
                font-weight: 400;
                color: #333333;
                margin-left: 30px;
                cursor: pointer;
                text-decoration: none;
                display: flex;

                &:hover {
                    color: #1c87f3;
                }

                .avatar {
                    width: 25px;
                    height: 25px;
                    object-fit: cover;
                    border-radius: 100%;
                    animation: avatarFadeSmall 0.35s both;
                    position: relative;
                    z-index: 1001;
                }
                .avatar-active {
                    animation: avatarFadeLarge 0.35s both;
                }

                .badge {
                    position: absolute;
                    right: -14px;
                    top: 4px;
                    padding: 0 4px;
                    background: #fa5151;
                    border-radius: 50px;
                    font-size: 12px;
                    color: #ffffff;
                }

                .dl {
                    padding-right: 2px;

                    &:hover {
                        text-decoration: underline;
                    }
                }

                .zc {
                    padding-left: 2px;

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }

            .nav-item-font {
                width: 0;
                height: 0;
                overflow: hidden;
                font-family: ZTGB2312;
            }

            .nav1 {
                img {
                    width: 9px;
                    height: 13px;
                    display: block;
                    margin-right: 4px;
                }

                display: flex;
                align-items: center;
            }

            .sign {
                img {
                    width: 21px;
                    height: 19px;
                    display: block;
                    margin-right: 6px;
                }

                display: flex;
                align-items: center;
            }
        }
    }

    .top-tabs {
        display: flex;
        justify-content: center;

        .tab {
            cursor: pointer;
            font-size: 16px;
            color: #666666;
            margin: 0 15px;

            &::after {
                content: "";
                width: 22px;
                height: 4px;
                background: #ffffff;
                display: block;
                margin: 0 auto;
                margin-top: 8px;
            }
        }

        .tab-s {
            font-weight: bold;
            color: #333333;

            &::after {
                background: #1c87f3;
            }
        }
    }

    .form {
        padding-top: 45px;
    }

    .qita {
        // padding: 16px 0;
        text-align: center;

        span {
            color: #1c87f3;
            text-decoration: underline;
            cursor: pointer;
        }
    }

    .img-code {
        .el-input-group__append {
            padding: 0 20px;
        }

        .img-code-code {
            width: 74px;
            height: 34px;
            position: relative;
            top: 2px;
        }
    }

    .agree {
        font-size: 12px;
        color: #999999;

        span {
            color: #333333;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    .login-title {
        text-align: center;
        font-size: 18px;
        font-weight: 500;
        color: #333333;
    }

    .mask {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.4);
        .app-go {
            padding: 20px 50px 0;
            font-size: 14px;
            color: #333333;
            line-height: 24px;
            text-align: center;
            a {
                text-decoration: underline;
            }
            span {
                color: #fa5151;
            }
        }
        .sign {
            width: 407px;
            height: 515px;
            background: #ffffff;
            border-radius: 16px;
            .sign-top {
                height: 148px;
                background: linear-gradient(-54deg, #6da3fe 0%, #988ef6 100%);
                border-top-right-radius: 16px;
                border-top-left-radius: 16px;
                position: relative;
                .title {
                    font-size: 34px;
                    font-weight: bold;
                    color: #ffffff;
                    padding-top: 26px;
                    text-align: center;
                }

                .continue-day {
                    width: 166px;
                    height: 36px;
                    background: rgba($color: #ffffff, $alpha: 0.16);
                    border-radius: 18px;
                    font-size: 16px;
                    color: #ffffff;
                    text-align: center;
                    line-height: 36px;
                    margin: 19px auto 0;
                }
                .explain {
                    position: absolute;
                    width: 20px;
                    height: 20px;
                    top: 18px;
                    right: 19px;
                }
                .sign-close {
                    position: absolute;
                    font-size: 30px;
                    color: #ffffff;
                    top: -9px;
                    right: -47px;
                    cursor: pointer;
                }
            }
            .new-title {
                position: relative;
                height: 60px;
                text-align: center;
                img {
                    width: 294px;
                    height: 69px;
                    position: absolute;
                    left: 56px;
                    top: -20px;
                }
                .sign-close {
                    position: absolute;
                    font-size: 30px;
                    color: #ffffff;
                    top: -9px;
                    right: -47px;
                    cursor: pointer;
                }
            }

            .sign-title {
                font-size: 20px;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 400;
                color: #333333;
                text-align: center;
                span {
                    color: #fa5151;
                    padding: 0 3px;
                }
            }

            // .sign-bottom {
            // }
        }
    }

    .sign-button {
        display: block;
        margin: 0 auto;
        color: #ffffff;
        margin-top: 26px;
        width: 320px;
        height: 58px;
        background: linear-gradient(90deg, #ff6a4d 0%, #ffa88b 100%);
        border-radius: 100px;
        opacity: 1;
        &:hover {
            background: linear-gradient(90deg, #ff6a4d 0%, #ffa88b 100%);
            opacity: 0.8;
            color: #ffffff;
        }
        &:active {
            background: linear-gradient(90deg, #ff6a4d 0%, #ffa88b 100%);
            opacity: 1;
            color: #ffffff;
        }
    }

    .sign-button-disabled {
        color: #666666;
        background: #e5e5e5 !important;
        &:hover {
            color: #666666;
            background: #e5e5e5;
        }
        &:active {
            color: #666666;
            background: #e5e5e5;
        }
    }

    .sign-list {
        display: flex;
        align-items: center;
        align-content: space-between;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 15px 19px 0;

        .sign-item {
            margin: 5px 6px;
            text-align: center;
            width: 80px;
            height: 111px;
            background: #fdf6e6;
            border-radius: 10px;
            border: 1px solid #ee8632;
            padding-top: 9px;
            box-sizing: border-box;
            position: relative;
            overflow: hidden;
            .bi-img {
                display: block;
                width: 30px;
                height: 30px;
                margin: 8px auto;
            }
            .kun-img {
                display: none;
                width: 68px;
                height: 48px;
                position: absolute;
                right: 0;
                bottom: 0;
            }
            .text1 {
                color: #f2ad3d;
            }
            .text2 {
                color: #ec6c2d;
            }
            .el-icon-success {
                font-size: 30px;
                color: #d9422a;
                display: none;
                margin: 13px auto;
                border-radius: 100px;
                background-color: #ffffff;
                padding: 0;
                width: 20px;
                height: 20px;
                &::before {
                    position: relative;
                    top: -4px;
                    left: -4px;
                }
            }
            &:last-child {
                width: 173px;
                text-align: left;
                padding: 9px 26px 0;
                .bi-img {
                    margin: 8px 0;
                }
                .text1 {
                    text-align: center;
                }

                .kun-img {
                    // display: block;
                }
            }
        }
        .sign-item-active {
            background: #ff644c;
            .el-icon-success {
                display: block;
            }
            .bi-img {
                display: none;
            }
            .text1 {
                color: #ffffff;
            }
            .text2 {
                color: #ffffff;
            }
        }
    }

    .switch-logintype {
        display: flex;
        align-items: flex-start;
        position: absolute;
        top: 0;
        right: 0;
        .text {
            width: 79px;
            cursor: pointer;
            display: block;
            top: 7px;
            right: -12px;
            position: relative;
        }
        .login-img {
            width: 55px;
            cursor: pointer;
        }
    }

    .login-wx-title {
        text-align: center;
        font-size: 20px;
        margin: 0 0 10px;
        height: 28px;
        line-height: 28px;
        color: #363636;
        position: relative;
        top: -10px;
    }

    .login-wx-img {
        text-align: center;
        height: 220px;
        position: relative;
        img {
            width: 220px;
            height: 220px;
        }
        .expire {
            position: absolute;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            background-color: rgba($color: #ffffff, $alpha: 0.9);
            color: #666666;
            text-align: center;
            padding-top: 88px;
            top: 0;
            left: 0;
        }
    }

    .login-wx-tip {
        margin-top: 5px;
        color: #aeaeae;
        font-size: 12px;
        text-align: center;
        position: relative;
        top: 12px;
    }
}
.xiaozhucaishui-nav-no-login-popover {
    padding: 5px 6px;
    .no-login-title {
        font-size: 14px;
        color: #333333;
    }
    .no-login-list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .no-login-item {
            padding-top: 15px;
            display: flex;
            align-items: center;
            width: 50%;
            font-size: 14px;
            color: #333333;
            img {
                width: 22px;
                height: 22px;
                margin-right: 7px;
            }
        }
    }
    .no-login-but {
        width: 100%;
        height: 38px;
        margin-top: 14px;
        display: block;
    }
    .no-login-text {
        font-size: 13px;
        font-family: Source Han Sans, Source Han Sans;
        color: #333333;
        text-align: center;
        padding-top: 14px;
        span {
            padding-left: 5px;
            color: #1c87f3;
            cursor: pointer;
        }
    }
}
.xiaozhucaishui-nav-news-list {
    .new-item {
        font-size: 14px;
        color: #666666;
        line-height: 40px;
        padding: 0 10px;
        cursor: pointer;
        position: relative;
        display: block;
        box-sizing: border-box;
        &:hover {
            color: #1c87f3;
        }
        .new-item-badge {
            position: absolute;
            background: #fa5151;
            font-size: 12px;
            font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
            font-weight: 500;
            color: #ffffff;
            height: 18px;
            line-height: 17px;
            border-radius: 18px;
            text-align: center;
            padding: 0 6px;
            top: 10px;
            right: 12px;
        }
    }
}
</style>
